<template>
	<view class="">
		<view class="mt-10">
			<u--form errorType="toast" :model="form" ref="myForm" :rules="rules" labelWidth="60">
				<u-form-item label="手机:" prop="phone" borderBottom>
					<u-input v-model="form.phone" border="none" type="number" placeholder="请输入联创手机" @blur="onBlur"/>
				</u-form-item>
				<u-form-item label="昵称:" prop="nickName" borderBottom>
					<u-input v-model="form.nickName" border="none" placeholder="请输入联创昵称" />
				</u-form-item>
				<u-form-item label="姓名:" prop="trueName" borderBottom>
					<u-input v-model="form.trueName" border="none" placeholder="请输入联创姓名" />
				</u-form-item>
				<u-form-item label="性别:" prop="sexText" borderBottom @click="openPicker('sex')">
					<u-input v-model="form.sexText" disabled disabledColor="#ffffff" placeholder="请选择联创性别" border="none" />
					<u-icon slot="right" name="arrow-right" />
				</u-form-item>
				<template v-if="type!=='3'">
					<u-form-item label="类型:" prop="schemeName" borderBottom @click="openPicker('scheme')">
						<u-input v-model="form.schemeName" disabled disabledColor="#ffffff" placeholder="请选择联创类型" border="none" />
						<u-icon slot="right" name="arrow-right" />
					</u-form-item>
					<!-- <u-form-item label="管家:" prop="managerName" borderBottom @click="openPicker('manager')"> -->
					<u-form-item label="管家:" prop="managerName" borderBottom @click="$u.route('/pages/selectPage/lianChuang', {dty:'manager'})">
						<u-input v-model="form.managerName" disabled disabledColor="#ffffff" placeholder="请选择联创管家" border="none" />
						<u-icon slot="right" name="arrow-right" />
					</u-form-item>
					<u-form-item label="上级:" prop="parentName" borderBottom @click="$u.route('/pages/selectPage/lianChuang', {dty:'parent'})">
						<u-input v-model="form.parentName" disabled disabledColor="#ffffff" placeholder="请选择上级联创" border="none" />
						<u-icon slot="right" name="arrow-right" />
					</u-form-item>
				</template>
				<u-form-item label="门店:" prop="storeName" :borderBottom="type!=='3'" @click="$u.route('/pages/selectPage/store')">
					<u-input v-model="form.storeName" disabled disabledColor="#ffffff" placeholder="请选择所属门店" border="none" />
					<u-icon slot="right" name="arrow-right" />
				</u-form-item>
				<u-form-item label="状态:" prop="status" v-if="type!=='3'">
					<u-switch slot="right" v-model="form.status" :activeValue="1" :inactiveValue="2" activeColor="#e54d42" inactiveColor="#606266"/>
				</u-form-item v-if="type ==='3'">
				<view class="padding-20 line-gray fsize-28">Tips: 请确认已线下签署协议，提交后将由门店后台审核</view>
			</u--form>
		</view>
		<view class="pl-30 pr-30 mt-40">
			<u-button color="#e54d42" text="保存" @click="submit" size="large"/>
		</view>
		<u-picker 
			keyName="name" 
			:show="showPicker" 
			:columns="pickerColumns" 
			@cancel="showPicker=false" 
			@close="showPicker=false"
			@confirm="confirmVal" 
			:closeOnClickOverlay="true"
		/>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '1',
				showPicker: false,
				pickerColumns:[],
				pickerType: '',
				form: {
					nickName: '',
					phone: '',
					sex: 1,
					sexText: '男',
					schemeId:0,
					schemeName:'',
					parentId: 0,
					parentName: '',
					managerName:'',
					managerId: 0,
					status: 1,
					trueName:'',
					storeId: '',
					storeName:''
				},
				schemeList:[],
				parentList:[],
				managerList:[],
				rules: {
					nickName: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					}],
					trueName: [{
						required: true,
						message: '请输入联创真实姓名',
						trigger: ['blur', 'change']
					}],
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value)
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					sex: [{
						required: true,
						message: '请输选择联创性别',
						trigger: ['blur', 'change']
					}],
					schemeId: [{
						required: true,
						message: '请输选择股类型',
						trigger: ['blur', 'change']
					}],
					managerId: [{
						required: true,
						message: '请输选择股管家',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		onLoad(option) {	
			const that = this
			this.getPickerData()
			this.type = option.type
			if(this.type === '1' || this.type === '3'){
				uni.setNavigationBarTitle({ title: '添加联创' })
			}else {
				that.staffid = option.id
				that.getUserInfo(that.staffid)
				uni.setNavigationBarTitle({ title: '编辑联创信息' })
			}
			uni.$on('select-manager', obj => {
				this.form.managerId = obj.id
				this.form.managerName = obj.nickName
			})
			uni.$on('select-parent', obj => {
				this.form.parentId = obj.id
				this.form.parentName = obj.nickName
			})
			uni.$on('select-store', obj => {
				this.form.storeId = obj.id
				this.form.storeName = obj.storeName
			})
		},
		onUnload() {
			uni.$off('select-parent')
			uni.$off('select-manager')
			uni.$off('select-store')
		},
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			onBlur(e){
				if(!uni.$u.test.mobile(e)) return
				if(this.type === '1' || this.type === '3'){
					this.$reqJsonPost('StoreStaffCheckStaff', {type: 2, phone: e}).then(res=>{
						if(res.data){
							this.form.nickName = res.data.nickName
							this.form.trueName = res.data.trueName
							this.form.sex = res.data.sex
							this.form.sexText = res.data.sex===1?'男':res.data.sex===2?'女':'未知'
						}
					}).catch(err=>{
						this.form.phone = ''
					})
				}
			},
			getPickerData(){
				this.$reqPost('StockHolderGetCreate').then(res=>{
					this.schemeList = res.data.bonusScheme.map(im => {return { name:im.schemeName,value: im.id }})
					this.managerList = res.data.stockHolder.map(im=>{return { name:im.nickName,value: im.id }})
					this.parentList = res.data.stockHolder.map(im=>{return { name:im.nickName,value: im.id }})
				})
			},
			openPicker(name){
				switch (name){
					case 'sex':
						this.pickerColumns = [[
							{ name: '男', value: 1 },
							{ name: '女', value: 2 },
							{ name: '未知', value: 3 },
						]]
						break
					case 'scheme':
						this.pickerColumns = [this.schemeList]
						break
					case 'parent':
						this.pickerColumns = [this.parentList]
						break
					case 'manager':
						this.pickerColumns = [this.managerList]
						break
				}
				this.showPicker = true
				this.pickerType = name
			},
			confirmVal(e){
				let name = this.pickerType
				switch (name){
					case 'sex':
						this.form.sexText = e.value[0].name
						this.form.sex = e.value[0].value
						break
					case 'scheme':
						this.form.schemeName = e.value[0].name
						this.form.schemeId = e.value[0].value
						break
					case 'parent':
						this.form.parentName = e.value[0].name
						this.form.parentId = e.value[0].value
						break
					case 'manager':
						this.form.managerName = e.value[0].name
						this.form.managerId = e.value[0].value
						break
				}
				this.showPicker = false
			},
			sexSelect(e) {
				this.form.sex = e.value
			},
			getUserInfo(id) {
				this.$reqJsonPost('StockHolderGetEdit',{ id:id }).then(res => {
					this.form = {
						staffId: res.data.id,
						nickName: res.data.nickName,
						phone: res.data.phone,
						sex: res.data.sex,
						sexText: res.data.sex===1?'男':res.data.sex===2?'女':'未知',
						schemeId: res.data.schemeId,
						schemeName:res.data.schemeName,
						parentId: res.data.topStaffId,
						parentName: res.data.topStaffName,
						managerName: res.data.managerName,
						managerId: res.data.managerId,
						status: res.data.status,
						trueName: res.data.trueName||'',
						storeName: res.data.storeName,
						storeId: res.data.storeId,
					}
				})
			},
			submit() {
				const that = this
				that.$refs.myForm.validate().then(res => {
					if(that.type === '2'){
						that.$reqJsonPost('StockHolderDoEdit', that.form).then(res => {
							if (res.code === 0) {
								that.$refs.uToast.show({
									message: res.msg,
									complete() {
										uni.$emit('upDetail', {staffid: that.staffid})
										uni.navigateBack()
									}
								})
							} else {
								uni.showToast({ title: res.msg, icon: 'none' })
							}
						})
					}else if(that.type === '3'){
						that.$reqJsonPost('StockHolderSuggestDoCheck', {
							...that.form,
							userName: that.form.nickName,
							topStaffId: that.form.parentId,
						}).then(res=>{
							that.$refs.uToast.show({
								message: res.msg,
								complete() {
									uni.$emit('upDetail', {staffid: that.staffid})
									uni.navigateBack()
								}
							})
						})
					}else {
						that.$reqJsonPost('StockHolderDoCreate', that.form).then(res=>{
							if (res.code === 0) {
								that.$refs.uToast.show({
									message: res.msg,
									complete() {
										uni.$emit('upDetail', {staffid: that.staffid})
										uni.navigateBack()
									}
								})
							} else {
								uni.showToast({ title: res.msg, icon: 'none' })
							}
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>
